<!DOCTYPE html>
<html lang="zh-CN">


<head>
    <meta charset="UTF-8">
    
    <link rel="apple-touch-icon" sizes="76x76" href="/null">
    <link rel="icon" type="image/png" href="/null">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5">
    <title>uniapp自定义底部tabbar(无闪烁) - 水中鱼</title>
    
    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
    
    
    <meta name="description" content="&lt;p&gt;uniapp自定义底部tabbar(无闪烁)&lt;/p&gt;">
    <meta name="author" content="zsh0409">
    <meta name="keywords" content="php,thinkphp,vue,element-ui,elementui,element-plus,elementplus,mysql">
    <meta property="og:title" content="uniapp自定义底部tabbar(无闪烁)"/>
    <style>


    
    :root{
        --shadow-color: rgba(0,0,0,0.2);
        --sec-shadow: rgba(0,0,0,0.03);
        --shadow-hover-color: rgba(0,0,0,0.28);
        --first-text-color: #475b6d;
        --second-text-color: #37475b;
        --third-text-color: #858585;
        --default-text-color: #505050;
        --default-link-color: #007bff;
        --link-color: #000000;
        --second-link-color: #4F9BFA;
        --code-color:rgba(27,31,35,.05);
        --post-bkg-color: #fff;
        --page-bkg-color: #f2f5f8;
        --nav-a-hover-color: #3498db;
        --post-sec-text-color: #718096;
        --sec-bkg: #f2f5f8;
        --color-mode: 'light';
        --bkg-h: rgba(255,255,255,0.6);
        --bkg-m: #e1e4e8;
        --home-title-color: #4169E1;
        --shadow: 0 4px 10px rgba(0,2,4,0.06),0 0 1px rgba(0,2,4,0.11);
        --hr-color: #ddd;
        --bg-t: #f4f4f4;
        --nav-bkg: rgba(255,255,255,0.6);
    }

@media (prefers-color-scheme: dark) {
  :root {
    --color-mode: 'dark';
  }

  :root:not([data-theme]) {
    --first-text-color: hsla(0,0%,100%,0.92);
    --second-text-color: hsla(0,0%,100%,0.86);
    --third-text-color: #a7a9ad;
    --default-text-color: #505050;
    --default-link-color: #1589e9;
    --link-color: #000000;
    --second-link-color: #30a9de;
    --post-bkg-color: #252d38;
    --page-bkg-color: #181c27;
    --nav-a-hover-color: #3498db;
    --post-sec-text-color: #a7a9ad;
    --sec-bkg: #364151;
    --bkg-h: rgba(255,255,255,0.2);
    --bkg-m: rgba(255,255,255,0.1);
    --home-title-color: rgb(226, 82, 90);
    --code-color:#3e4b5e;
    --shadow: none;
    --hr-color: #718096;
    --bg-t: #364151;
    --nav-bkg: rgba(13,17,23,0.6);
  }
}

[data-theme='dark'] {
    --shadow-color: rgba(0,0,0,0.2);
    --shadow-hover-color: rgba(0,0,0,0.28);
    --first-text-color: hsla(0,0%,100%,0.92);
    --second-text-color: hsla(0,0%,100%,0.86);
    --third-text-color: #a7a9ad;
    --default-text-color: #505050;
    --default-link-color: #1589e9;
    --link-color: #000000;
    --second-link-color: #30a9de;
    --post-bkg-color: #252d38;
    --page-bkg-color: #181c27;
    --nav-a-hover-color: #3498db;
    --post-sec-text-color: #a7a9ad;
    --sec-bkg: #364151;
    --bkg-h: rgba(255,255,255,0.2);
    --bkg-m: rgba(255,255,255,0.1);
    --home-title-color: rgb(226, 82, 90);
    --code-color:#3e4b5e;
    --shadow: none;
    --hr-color: #718096;
    --bg-t: #364151;
    --nav-bkg: rgba(13,17,23,0.6);
}

</style>



<style>
#page-main,footer,.p-btn{
    display: none;
}
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    /*height: 100%;*/
}
body {
    background-color: var(--page-bkg-color);
    color: var(--second-text-color);
    overflow-y: scroll;
    overflow-x: hidden;
    transition: all .3s;
}
a {
    color: var(--default-link-color);
    text-decoration: none;
    background-color: transparent;
}
a:hover{
    color: var(--second-link-color);
}
.main-content,.post-card-main{
    margin: 30px;
}



@media (max-width: 410px){
    .post-card-main{
        max-width: 350px!important;
    }
}

@media (max-width: 980px){
    .post-card-main{
        max-width: 520px!important;
    }
}


@media (min-width: 780px){ 
    h3{
        font-size: 1.5rem;
        line-height: 1.5em;
    }
}
@media (min-width: 1280px){ 
    h3{
        font-size: 1.7rem;
        line-height: 1.5em;
    }
}
@media (min-width: 2096px){ 
    h3{
        font-size: 1.8rem;
        line-height: 1.5em;
    }
}

.text-center{
    text-align: center!important;
}
.middle-center{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: 100%;
}
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    height: 54px;
    padding: 0 1.25rem;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    border-bottom: 1px solid var(--bkg-m);
    background-color: var(--nav-bkg);
    backdrop-filter: blur(4px);
    transition: all .3s;
}
header .header__left, header .header__right {
    display: flex;
    align-items: center;
    font-family: rubik,sans-serif,Varela Round;
}
header .header__left .logo__text {
    font-size: 18px;
    font-weight: 450;
    padding: 14.5px 10px;
    border-radius: 5px;
    color: var(--second-text-color);
}
header .header__right .navbar__menus {
    height: 54px;
    padding: 0 0 0 15px;
}
header .header__right .button {
    color: var(--second-text-color);
}
header .header__right .navbar__menus .navbar-menu {
    display: inline-block;
    align-items: center;
    height: 54px;
    padding: 0 10px;
    font-size: 16px;
    line-height: 54px;
}
header .header__right .dropdown-icon {
    display: none;
    height: 54px;
    padding: 15px 10px;
    border: 0;
    background-color: transparent;
}
header .header__right .dropdown-menus {
    line-height: 2rem;
    animation: slide-in .15s ease 1;
    display: none;
    position: absolute;
    left: 12px;
    right: 12px;
    top: calc(54px + 10px);
    border-radius: 6px;
    padding: 24px;
    background-color: var(--page-bkg-color);
    border: 1px solid var(--bkg-m);
    z-index: 9999;
    justify-items: center;
    justify-content: center;
    flex-direction: column;
}
header .header__right #btn-search, header .header__right #btn-toggle-dark{
    display: inline-block;
    padding:  18px 10px;
    height: 25px;
}
header .header__right #btn-dropdown{
  display: inline-block;
  padding:  13.5px 0;
}
header .header__right .dropdown-menus .dropdown-menu {
    padding: 10px;
    color: var(--second-text-color);
}
@media screen and (max-width: 764px){
.navbar__menus {
    display: none!important;
}
.dropdown-icon {
    display: inline-block!important;
}
}
.p-btn{
    position: fixed;
    bottom: 1.2rem;
    right: 1.2rem;
    contain: layout;
}
.toc-btn,.click-btn{
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    align-items: center;
    margin-top: .5rem;
    font-size: .75rem;
    background-color: var(--sec-bkg);
    display: block;
    padding: 0.9rem;
    box-shadow: 0 0.3rem 0.6rem rgba(48,55,66,.15);
    border: none;
    border-radius: 0.5rem;
    line-height: 1;
    color: var(--first-text-color);
}
.toc-link{
    color: var(--second-text-color);
}

#css-loading h3{
    font-weight: 500;
    font-size: 1.4rem;
    text-align: center;
    position: fixed;
    top: 200px;
    left: 0;
    right: 0;
    opacity: 0;
    animation: cssLoad;
    animation-delay: 0.3s;
    -webkit-animation: cssLoad;
    -webkit-animation-delay: 0.3s;
}
@keyframes cssLoad {
    from {
        opacity: 0;
    }
    to {
        opacity: 0.9;
    }
}


.memorial {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); filter:gray;
}


    .post-copyright:after {
        position: absolute;
        color: #fff;
        background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 496 512'%3E%3Cpath fill='gray' d='M245.8 214.9l-33.2 17.3c-9.4-19.6-25.2-20-27.4-20-22.2 0-33.3 14.6-33.3 43.9 0 23.5 9.2 43.8 33.3 43.8 14.4 0 24.6-7 30.5-21.3l30.6 15.5a73.2 73.2 0 01-65.1 39c-22.6 0-74-10.3-74-77 0-58.7 43-77 72.6-77 30.8-.1 52.7 11.9 66 35.8zm143 0l-32.7 17.3c-9.5-19.8-25.7-20-27.9-20-22.1 0-33.2 14.6-33.2 43.9 0 23.5 9.2 43.8 33.2 43.8 14.5 0 24.7-7 30.5-21.3l31 15.5c-2 3.8-21.3 39-65 39-22.7 0-74-9.9-74-77 0-58.7 43-77 72.6-77C354 179 376 191 389 214.8zM247.7 8C104.7 8 0 123 0 256c0 138.4 113.6 248 247.6 248C377.5 504 496 403 496 256 496 118 389.4 8 247.6 8zm.8 450.8c-112.5 0-203.7-93-203.7-202.8 0-105.5 85.5-203.3 203.8-203.3A201.7 201.7 0 01451.3 256c0 121.7-99.7 202.9-202.9 202.9z'/%3E%3C/svg%3E");
        content: ' ';
        height: 10rem;
        width: 10rem;
        right: -2rem;
        top: -2rem;
        opacity: .1;
    }

</style>

    

    
        <!--
        <link rel="stylesheet" href="/css/page.css" media="print"
            onload="this.media='all';this.onload=null">
        <noscript>-->
            <link rel="stylesheet" href="/css/page.css">
        <!--</noscript>-->
    
    
    <link rel="stylesheet" href="/css/main.css" media="print" onload="this.media='all';this.onload=null">
    <noscript>
        <link rel="stylesheet" href="/css/main.css">
    </noscript>

    
    <script src="/js/main.js"></script>
    
<meta name="generator" content="Hexo 7.0.0"></head>

    <body>
        <header>
            
<div class="header__left">
	<a href="/" class="button"><span class="logo__text">水中鱼</span></a>
</div>
<div class="header__right">
	<div class="navbar__menus">
		
		<a href="/" class="button">
			<div class="navbar-menu">首页</div>
		</a>
		
		<a href="/archives/" class="button">
			<div class="navbar-menu">归档</div>
		</a>
		
		<a href="/categories/" class="button">
			<div class="navbar-menu">分类</div>
		</a>
		
		<a href="/tags/" class="button">
			<div class="navbar-menu">标签</div>
		</a>
		
		<a href="/about/" class="button">
			<div class="navbar-menu">关于</div>
		</a>
		
	</div>
	
	<a href="/search/" class="button">
		<div id="btn-search">
			<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1024 1024" width="24" height="24" fill="currentColor"
				stroke="currentColor" stroke-width="32">
				<path
					d="M192 448c0-141.152 114.848-256 256-256s256 114.848 256 256-114.848 256-256 256-256-114.848-256-256z m710.624 409.376l-206.88-206.88A318.784 318.784 0 0 0 768 448c0-176.736-143.264-320-320-320S128 271.264 128 448s143.264 320 320 320a318.784 318.784 0 0 0 202.496-72.256l206.88 206.88 45.248-45.248z">
				</path>
			</svg>
		</div>
	</a>
	
	<a href="javaScript:void(0);" class="button" id="btn-toggle-dark">
		<div>
			<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none"
				stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
				<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
			</svg>
		</div>
	</a>
	<a href="javaScript:void(0);" class="dropdown-icon button">
		<div id="btn-dropdown">
			<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1024 1024" width="24" height="24" fill="currentColor"
				stroke="currentColor" stroke-width="32" stroke-linecap="round">
				<path
					d="M903.43 561.52H148.8c-13.25 0-24-10.75-24-24s10.75-24 24-24h754.63c13.25 0 24 10.75 24 24s-10.75 24-24 24zM903.43 204.31H148.8c-13.25 0-24-10.75-24-24s10.75-24 24-24h754.63c13.25 0 24 10.75 24 24s-10.75 24-24 24zM903.43 918.73H148.8c-13.25 0-24-10.75-24-24s10.75-24 24-24h754.63c13.25 0 24 10.75 24 24s-10.75 24-24 24z"
					fill="currentColor"></path>
			</svg>
		</div>
	</a>
	<div class="dropdown-menus" id="dropdown-menus">
		
		<a href="/" class="dropdown-menu button">首页</a>
		<br>
		
		<a href="/archives/" class="dropdown-menu button">归档</a>
		<br>
		
		<a href="/categories/" class="dropdown-menu button">分类</a>
		<br>
		
		<a href="/tags/" class="dropdown-menu button">标签</a>
		<br>
		
		<a href="/about/" class="dropdown-menu button">关于</a>
		<br>
		
	</div>
</div>

        </header>
        <div id="top"></div>
        <div id="page-main" class="main-content">
        <div class="mg-top">
            

<article class="page">
<div id="post-meta-m">
    <div class="post-meta" id="post-meta">
  <h3>uniapp自定义底部tabbar(无闪烁)</h3>
    
      <span class="post-meta-label">
        zsh0409
      </span>
    
    
      <span class="post-meta-label">
        <span class="p-dot"></span>
        <time datetime="2024-01-16 15:13" pubdate>
          2024-01-16
        </time>
      </span>
    
    
      
      <span class="post-meta">
        <span class="p-dot"></span>
        共 2.6k 字
      </span>
    
    
    
  </div>
  
</div>
<div class="article-m">
  <div class="post-toc">
    
      
    
  </div>
    <div id="article">
      <div id="post-content" class="markdown-body textretty">
        <p>uniapp自定义底部tabbar(无闪烁)</p>
<span id="more"></span>

<blockquote>
<p><a target="_blank" rel="noopener" href="https://download.csdn.net/download/zsh0409/88557936?spm=1001.2101.3001.9499">源码下载 https://download.csdn.net/download/zsh0409/88557936?spm=1001.2101.3001.9499</a></p>
</blockquote>
<p>思路：</p>
<p>1.创建自定义的tabbar组件</p>
<p>2.增加启动页面page&#x2F;index&#x2F;index</p>
<p>3.在启动页面加载所有tab页面，使用tabbar组件进行切换</p>
<p>主要代码：</p>
<p>mytabbar.vue</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br><span class="line">197</span><br><span class="line">198</span><br><span class="line">199</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">	&lt;view class=&quot;uni-tabbar&quot;&gt;</span><br><span class="line">		&lt;view class=&quot;uni-tabbar__item&quot; v-for=&quot;(item,index) in tabList&quot; :key=&quot;index&quot; @tap=&quot;changeTab(item)&quot;&gt;</span><br><span class="line">			&lt;view class=&quot;uni-tabbar__icon&quot; :class=&quot;[tabs[item].fontIcon, item == activeTab? &#x27;active&#x27;:&#x27;&#x27;]&quot;&gt;&lt;/view&gt;</span><br><span class="line">			&lt;view class=&quot;uni-tabbar__label&quot; :class=&quot;&#123;&#x27;active&#x27;: item == activeTab&#125;&quot;&gt;</span><br><span class="line">				&#123;&#123;tabs[item].text&#125;&#125;</span><br><span class="line">			&lt;/view&gt;</span><br><span class="line">		&lt;/view&gt;</span><br><span class="line">	&lt;/view&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"> </span><br><span class="line">&lt;script&gt;</span><br><span class="line">	export default &#123;</span><br><span class="line">		props: &#123;</span><br><span class="line">			tabList: &#123;</span><br><span class="line">				type: Array,</span><br><span class="line">				default: [&#x27;tabMyIndex&#x27;]</span><br><span class="line">			&#125;,</span><br><span class="line">			activeTab: &#123;</span><br><span class="line">				type: String,</span><br><span class="line">				default: &#x27;&#x27;</span><br><span class="line">			&#125;</span><br><span class="line">		&#125;,</span><br><span class="line">		emits:[&#x27;update:activeTab&#x27;],</span><br><span class="line">		data() &#123;</span><br><span class="line">			return &#123;</span><br><span class="line">				tabs: &#123;</span><br><span class="line">					tabAdminIndex: &#123;</span><br><span class="line">						&quot;pagePath&quot;: &quot;/pages/admin/index&quot;,</span><br><span class="line">						&quot;selectedIconPath&quot;: &quot;/static/tabBar/home_col.png&quot;,</span><br><span class="line">						&quot;text&quot;: &quot;首页&quot;,</span><br><span class="line">						&quot;fontIcon&quot;: &quot;w-icon-home&quot;</span><br><span class="line">					&#125;,</span><br><span class="line">					tabAdminCustom: &#123;</span><br><span class="line">						&quot;pagePath&quot;: &quot;/pages/admin/custom&quot;,</span><br><span class="line">						&quot;selectedIconPath&quot;: &quot;/static/tabBar/home_col.png&quot;,</span><br><span class="line">						&quot;text&quot;: &quot;客户&quot;,</span><br><span class="line">						&quot;fontIcon&quot;: &quot;w-icon-qq&quot;</span><br><span class="line">					&#125;,</span><br><span class="line">					tabAdminDepartment: &#123;</span><br><span class="line">						&quot;pagePath&quot;: &quot;/pages/admin/department&quot;,</span><br><span class="line">						&quot;selectedIconPath&quot;: &quot;/static/tabBar/person_col.png&quot;,</span><br><span class="line">						&quot;text&quot;: &quot;部门&quot;,</span><br><span class="line">						&quot;fontIcon&quot;: &quot;w-icon-user&quot;</span><br><span class="line">					&#125;,</span><br><span class="line">					tabAdminPersonnel: &#123;</span><br><span class="line">						&quot;pagePath&quot;: &quot;/pages/admin/personnel&quot;,</span><br><span class="line">						&quot;selectedIconPath&quot;: &quot;/static/tabBar/person_col.png&quot;,</span><br><span class="line">						&quot;text&quot;: &quot;员工&quot;,</span><br><span class="line">						&quot;fontIcon&quot;: &quot;w-icon-user&quot;</span><br><span class="line">					&#125;,</span><br><span class="line"> </span><br><span class="line">					tabSaleCustom: &#123;</span><br><span class="line">						&quot;pagePath&quot;: &quot;/pages/sale/custom&quot;,</span><br><span class="line">						&quot;selectedIconPath&quot;: &quot;/static/tabBar/person_col.png&quot;,</span><br><span class="line">						&quot;text&quot;: &quot;客户&quot;,</span><br><span class="line">						&quot;fontIcon&quot;: &quot;w-icon-user&quot;</span><br><span class="line">					&#125;,</span><br><span class="line"> </span><br><span class="line">					tabSaleAdminCustom: &#123;</span><br><span class="line">						&quot;pagePath&quot;: &quot;/pages/saleadmin/custom&quot;,</span><br><span class="line">						&quot;selectedIconPath&quot;: &quot;/static/tabBar/person_col.png&quot;,</span><br><span class="line">						&quot;text&quot;: &quot;客户&quot;,</span><br><span class="line">						&quot;fontIcon&quot;: &quot;w-icon-user&quot;</span><br><span class="line">					&#125;,</span><br><span class="line">					tabSaleAdminPerformance: &#123;</span><br><span class="line">						&quot;pagePath&quot;: &quot;/pages/saleadmin/performance&quot;,</span><br><span class="line">						&quot;selectedIconPath&quot;: &quot;/static/tabBar/person_col.png&quot;,</span><br><span class="line">						&quot;text&quot;: &quot;业绩&quot;,</span><br><span class="line">						&quot;fontIcon&quot;: &quot;w-icon-user&quot;</span><br><span class="line">					&#125;,</span><br><span class="line">					tabSaleadminPersonnel: &#123;</span><br><span class="line">						&quot;pagePath&quot;: &quot;/pages/saleadmin/personnel&quot;,</span><br><span class="line">						&quot;selectedIconPath&quot;: &quot;/static/tabBar/person_col.png&quot;,</span><br><span class="line">						&quot;text&quot;: &quot;员工&quot;,</span><br><span class="line">						&quot;fontIcon&quot;: &quot;w-icon-user&quot;</span><br><span class="line">					&#125;,</span><br><span class="line"> </span><br><span class="line">					tabEvaluateCustom: &#123;</span><br><span class="line">						&quot;pagePath&quot;: &quot;/pages/evaluate/custom&quot;,</span><br><span class="line">						&quot;selectedIconPath&quot;: &quot;/static/tabBar/person_col.png&quot;,</span><br><span class="line">						&quot;text&quot;: &quot;客户&quot;,</span><br><span class="line">						&quot;fontIcon&quot;: &quot;w-icon-user&quot;</span><br><span class="line">					&#125;,</span><br><span class="line"> </span><br><span class="line">					tabEvaluateadminCustom: &#123;</span><br><span class="line">						&quot;pagePath&quot;: &quot;/pages/evaluateadmin/custom&quot;,</span><br><span class="line">						&quot;selectedIconPath&quot;: &quot;/static/tabBar/person_col.png&quot;,</span><br><span class="line">						&quot;text&quot;: &quot;客户&quot;,</span><br><span class="line">						&quot;fontIcon&quot;: &quot;w-icon-user&quot;</span><br><span class="line">					&#125;,</span><br><span class="line">					tabEvaluateadminPerformance: &#123;</span><br><span class="line">						&quot;pagePath&quot;: &quot;/pages/evaluateadmin/performance&quot;,</span><br><span class="line">						&quot;selectedIconPath&quot;: &quot;/static/tabBar/person_col.png&quot;,</span><br><span class="line">						&quot;text&quot;: &quot;业绩&quot;,</span><br><span class="line">						&quot;fontIcon&quot;: &quot;w-icon-user&quot;</span><br><span class="line">					&#125;,</span><br><span class="line">					tabEvaluateadminPersonnel: &#123;</span><br><span class="line">						&quot;pagePath&quot;: &quot;/pages/evaluateadmin/personnel&quot;,</span><br><span class="line">						&quot;selectedIconPath&quot;: &quot;/static/tabBar/person_col.png&quot;,</span><br><span class="line">						&quot;text&quot;: &quot;员工&quot;,</span><br><span class="line">						&quot;fontIcon&quot;: &quot;w-icon-user&quot;</span><br><span class="line">					&#125;,</span><br><span class="line"> </span><br><span class="line">					tabOperationCustom: &#123;</span><br><span class="line">						&quot;pagePath&quot;: &quot;/pages/operation/custom&quot;,</span><br><span class="line">						&quot;selectedIconPath&quot;: &quot;/static/tabBar/person_col.png&quot;,</span><br><span class="line">						&quot;text&quot;: &quot;客户&quot;,</span><br><span class="line">						&quot;fontIcon&quot;: &quot;w-icon-user&quot;</span><br><span class="line">					&#125;,</span><br><span class="line"> </span><br><span class="line">					tabOperationadminCustom: &#123;</span><br><span class="line">						&quot;pagePath&quot;: &quot;/pages/operationadmin/custom&quot;,</span><br><span class="line">						&quot;selectedIconPath&quot;: &quot;/static/tabBar/person_col.png&quot;,</span><br><span class="line">						&quot;text&quot;: &quot;客户&quot;,</span><br><span class="line">						&quot;fontIcon&quot;: &quot;w-icon-user&quot;</span><br><span class="line">					&#125;,</span><br><span class="line">					tabOperationadminPerformance: &#123;</span><br><span class="line">						&quot;pagePath&quot;: &quot;/pages/operationadmin/performance&quot;,</span><br><span class="line">						&quot;selectedIconPath&quot;: &quot;/static/tabBar/person_col.png&quot;,</span><br><span class="line">						&quot;text&quot;: &quot;业绩&quot;,</span><br><span class="line">						&quot;fontIcon&quot;: &quot;w-icon-user&quot;</span><br><span class="line">					&#125;,</span><br><span class="line">					tabOperationadminPersonnel: &#123;</span><br><span class="line">						&quot;pagePath&quot;: &quot;/pages/operationadmin/personnel&quot;,</span><br><span class="line">						&quot;selectedIconPath&quot;: &quot;/static/tabBar/person_col.png&quot;,</span><br><span class="line">						&quot;text&quot;: &quot;员工&quot;,</span><br><span class="line">						&quot;fontIcon&quot;: &quot;w-icon-user&quot;</span><br><span class="line">					&#125;,</span><br><span class="line"> </span><br><span class="line">					tabMyIndex: &#123;</span><br><span class="line">						&quot;pagePath&quot;: &quot;/pages/my/index&quot;,</span><br><span class="line">						&quot;selectedIconPath&quot;: &quot;/static/tabBar/person_col.png&quot;,</span><br><span class="line">						&quot;text&quot;: &quot;我的&quot;,</span><br><span class="line">						&quot;fontIcon&quot;: &quot;w-icon-user&quot;</span><br><span class="line">					&#125;,</span><br><span class="line">				&#125;,</span><br><span class="line">			&#125;;</span><br><span class="line">		&#125;,</span><br><span class="line">		methods: &#123;</span><br><span class="line">			changeTab(item) &#123;</span><br><span class="line">				this.$emit(&#x27;update:activeTab&#x27;, item)</span><br><span class="line">			&#125;,</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line"> </span><br><span class="line">&lt;style lang=&quot;scss&quot; scoped&gt;</span><br><span class="line">	[nvue] uni-scroll-view,</span><br><span class="line">	[nvue] uni-swiper-item,</span><br><span class="line">	[nvue] uni-view &#123;</span><br><span class="line">		flex-direction: unset;</span><br><span class="line">	&#125;</span><br><span class="line"> </span><br><span class="line">	[nvue-dir-column] uni-swiper-item,</span><br><span class="line">	[nvue-dir-column] uni-view &#123;</span><br><span class="line">		flex-direction: unset;</span><br><span class="line">	&#125;</span><br><span class="line"> </span><br><span class="line">	.uni-tabbar &#123;</span><br><span class="line">		display: flex;</span><br><span class="line">		position: fixed;</span><br><span class="line">		justify-content: space-around;</span><br><span class="line">		bottom: 0;</span><br><span class="line">		z-index: 999;</span><br><span class="line">		width: 100%;</span><br><span class="line">		height: 101upx;</span><br><span class="line">		padding: 10upx 0;</span><br><span class="line">		box-sizing: border-box;</span><br><span class="line">		-moz-box-sizing: border-box;</span><br><span class="line">		border-top: solid 1upx #ccc;</span><br><span class="line">		background-color: #fff;</span><br><span class="line">		box-shadow: 0px 0px 17upx 1upx rgba(206, 206, 206, 0.32);</span><br><span class="line"> </span><br><span class="line">		.uni-tabbar__item &#123;</span><br><span class="line">			display: block;</span><br><span class="line">			line-height: 40upx;</span><br><span class="line">			font-size: 36upx;</span><br><span class="line">			text-align: center;</span><br><span class="line">		&#125;</span><br><span class="line"> </span><br><span class="line">		.uni-tabbar__icon &#123;</span><br><span class="line">			font-size: 36upx;</span><br><span class="line">			padding-bottom: 4upx;</span><br><span class="line"> </span><br><span class="line">			&amp;.active &#123;</span><br><span class="line">				color: #1ca6ec;</span><br><span class="line">			&#125;</span><br><span class="line">		&#125;</span><br><span class="line"> </span><br><span class="line">		.uni-tabbar__label &#123;</span><br><span class="line">			font-size: 30upx;</span><br><span class="line"> </span><br><span class="line">			&amp;.active &#123;</span><br><span class="line">				color: #1ca6ec;</span><br><span class="line">			&#125;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">&lt;/style&gt;</span><br></pre></td></tr></table></figure>

<p>page&#x2F;index&#x2F;index&#x2F;vue</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">	&lt;view&gt;</span><br><span class="line">		&lt;view class=&quot;main&quot;&gt;</span><br><span class="line">			&lt;adminIndex v-if=&quot;activeTab == &#x27;tabAdminIndex&#x27;&quot;&gt;&lt;/adminIndex&gt;</span><br><span class="line">			&lt;adminCustom v-if=&quot;activeTab == &#x27;tabAdminCustom&#x27;&quot;&gt;&lt;/adminCustom&gt;</span><br><span class="line">			&lt;adminDepartment v-if=&quot;activeTab == &#x27;tabAdminDepartment&#x27;&quot;&gt;&lt;/adminDepartment&gt;</span><br><span class="line">			&lt;adminPersonnel v-if=&quot;activeTab == &#x27;tabAdminPersonnel&#x27;&quot;&gt;&lt;/adminPersonnel&gt;</span><br><span class="line"> </span><br><span class="line">			&lt;saleCustom v-if=&quot;activeTab == &#x27;tabSaleCustom&#x27;&quot;&gt;&lt;/saleCustom&gt;</span><br><span class="line"> </span><br><span class="line">			&lt;saleadminCustom v-if=&quot;activeTab == &#x27;tabSaleAdminCustom&#x27;&quot;&gt;&lt;/saleadminCustom&gt;</span><br><span class="line">			&lt;saleadminPerformance v-if=&quot;activeTab == &#x27;tabSaleAdminPerformance&#x27;&quot;&gt;&lt;/saleadminPerformance&gt;</span><br><span class="line">			&lt;saleadminPersonnel v-if=&quot;activeTab == &#x27;tabSaleadminPersonnel&#x27;&quot;&gt;&lt;/saleadminPersonnel&gt;</span><br><span class="line"> </span><br><span class="line">			&lt;evaluateCustom v-if=&quot;activeTab == &#x27;tabEvaluateCustom&#x27;&quot;&gt;&lt;/evaluateCustom&gt;</span><br><span class="line"> </span><br><span class="line">			&lt;evaluateadminCustom v-if=&quot;activeTab == &#x27;tabEvaluateadminCustom&#x27;&quot;&gt;&lt;/evaluateadminCustom&gt;</span><br><span class="line">			&lt;evaluateadminPerformance v-if=&quot;activeTab == &#x27;tabEvaluateadminPerformance&#x27;&quot;&gt;&lt;/evaluateadminPerformance&gt;</span><br><span class="line">			&lt;evaluateadminPersonnel v-if=&quot;activeTab == &#x27;tabEvaluateadminPersonnel&#x27;&quot;&gt;&lt;/evaluateadminPersonnel&gt;</span><br><span class="line"> </span><br><span class="line">			&lt;operationCustom v-if=&quot;activeTab == &#x27;tabOperationCustom&#x27;&quot;&gt;&lt;/operationCustom&gt;</span><br><span class="line"> </span><br><span class="line">			&lt;operationadminCustom v-if=&quot;activeTab == &#x27;tabOperationadminCustom&#x27;&quot;&gt;&lt;/operationadminCustom&gt;</span><br><span class="line">			&lt;operationadminPerformance v-if=&quot;activeTab == &#x27;tabOperationadminPerformance&#x27;&quot;&gt;&lt;/operationadminPerformance&gt;</span><br><span class="line">			&lt;operationadminPersonnel v-if=&quot;activeTab == &#x27;tabOperationadminPersonnel&#x27;&quot;&gt;&lt;/operationadminPersonnel&gt;</span><br><span class="line"> </span><br><span class="line">			&lt;my v-if=&quot;activeTab == &#x27;tabMyIndex&#x27;&quot;&gt;&lt;/my&gt;</span><br><span class="line">		&lt;/view&gt;</span><br><span class="line">		&lt;view class=&quot;footer&quot;&gt;</span><br><span class="line">			&lt;myTabbar :tabList=&quot;tabbar&quot; v-model:activeTab=&quot;activeTab&quot;&gt;&lt;/myTabbar&gt;</span><br><span class="line">		&lt;/view&gt;</span><br><span class="line">	&lt;/view&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"> </span><br><span class="line">&lt;script&gt;</span><br><span class="line">	import myTabbar from &#x27;@/components/mytabbar.vue&#x27;</span><br><span class="line"> </span><br><span class="line">	import adminIndex from &#x27;@/pages/admin/index.vue&#x27;</span><br><span class="line">	import adminCustom from &#x27;@/pages/admin/custom.vue&#x27;</span><br><span class="line">	import adminDepartment from &#x27;@/pages/admin/department.vue&#x27;</span><br><span class="line">	import adminPersonnel from &#x27;@/pages/admin/personnel.vue&#x27;</span><br><span class="line"> </span><br><span class="line">	import saleCustom from &#x27;@/pages/sale/custom.vue&#x27;</span><br><span class="line"> </span><br><span class="line">	import saleadminCustom from &#x27;@/pages/saleadmin/custom.vue&#x27;</span><br><span class="line">	import saleadminPerformance from &#x27;@/pages/saleadmin/performance.vue&#x27;</span><br><span class="line">	import saleadminPersonnel from &#x27;@/pages/saleadmin/personnel.vue&#x27;</span><br><span class="line"> </span><br><span class="line">	import evaluateCustom from &#x27;@/pages/evaluate/custom.vue&#x27;</span><br><span class="line"> </span><br><span class="line">	import evaluateadminCustom from &#x27;@/pages/evaluateadmin/custom.vue&#x27;</span><br><span class="line">	import evaluateadminPerformance from &#x27;@/pages/evaluateadmin/performance.vue&#x27;</span><br><span class="line">	import evaluateadminPersonnel from &#x27;@/pages/evaluateadmin/personnel.vue&#x27;</span><br><span class="line"> </span><br><span class="line">	import operationCustom from &#x27;@/pages/operation/custom.vue&#x27;</span><br><span class="line"> </span><br><span class="line">	import operationadminCustom from &#x27;@/pages/operationadmin/custom.vue&#x27;</span><br><span class="line">	import operationadminPerformance from &#x27;@/pages/operationadmin/performance.vue&#x27;</span><br><span class="line">	import operationadminPersonnel from &#x27;@/pages/operationadmin/personnel.vue&#x27;</span><br><span class="line"> </span><br><span class="line">	import my from &#x27;@/pages/my/index.vue&#x27;</span><br><span class="line"> </span><br><span class="line">	export default &#123;</span><br><span class="line">		data() &#123;</span><br><span class="line">			return &#123;</span><br><span class="line">				tabbar: [],</span><br><span class="line">				activeTab: &#x27;&#x27;,</span><br><span class="line">			&#125;</span><br><span class="line">		&#125;,</span><br><span class="line">		methods: &#123;&#125;,</span><br><span class="line">		onLoad() &#123;</span><br><span class="line">			let _role = localStorage.getItem(&#x27;token&#x27;)</span><br><span class="line">			</span><br><span class="line">			console.log(_role)</span><br><span class="line">			if (_role == null || _role == &#x27;&#x27;) &#123;</span><br><span class="line">				uni.reLaunch(&#123;</span><br><span class="line">					url: &#x27;/pages/login/index&#x27;</span><br><span class="line">				&#125;)</span><br><span class="line">			&#125;</span><br><span class="line"> </span><br><span class="line">			if (_role == &#x27;admin&#x27;) &#123;</span><br><span class="line">				this.tabbar = [</span><br><span class="line">					&#x27;tabAdminIndex&#x27;, &#x27;tabAdminCustom&#x27;, &#x27;tabAdminDepartment&#x27;, &#x27;tabAdminPersonnel&#x27;, &#x27;tabMyIndex&#x27;</span><br><span class="line">				]</span><br><span class="line">				this.activeTab = &#x27;tabAdminIndex&#x27;</span><br><span class="line">			&#125;</span><br><span class="line">			if (_role == &#x27;sale&#x27;) &#123;</span><br><span class="line">				this.tabbar = [</span><br><span class="line">					&#x27;tabSaleCustom&#x27;, &#x27;tabMyIndex&#x27;</span><br><span class="line">				]</span><br><span class="line">				this.activeTab = &#x27;tabSaleCustom&#x27;</span><br><span class="line">			&#125;</span><br><span class="line">			if (_role == &#x27;saleadmin&#x27;) &#123;</span><br><span class="line">				this.tabbar = [</span><br><span class="line">					&#x27;tabSaleAdminCustom&#x27;, &#x27;tabSaleAdminPerformance&#x27;, &#x27;tabSaleadminPersonnel&#x27;, &#x27;tabMyIndex&#x27;</span><br><span class="line">				]</span><br><span class="line">				this.activeTab = &#x27;tabSaleAdminCustom&#x27;</span><br><span class="line">			&#125;</span><br><span class="line">			if (_role == &#x27;evaluate&#x27;) &#123;</span><br><span class="line">				this.tabbar = [</span><br><span class="line">					&#x27;tabEvaluateCustom&#x27;, &#x27;tabMyIndex&#x27;</span><br><span class="line">				]</span><br><span class="line">				this.activeTab = &#x27;tabEvaluateCustom&#x27;</span><br><span class="line">			&#125;</span><br><span class="line">			if (_role == &#x27;evaluateadmin&#x27;) &#123;</span><br><span class="line">				this.tabbar = [</span><br><span class="line">					&#x27;tabEvaluateadminCustom&#x27;, &#x27;tabEvaluateadminPerformance&#x27;, &#x27;tabEvaluateadminPersonnel&#x27;,</span><br><span class="line">					&#x27;tabMyIndex&#x27;</span><br><span class="line">				]</span><br><span class="line">				this.activeTab = &#x27;tabEvaluateadminCustom&#x27;</span><br><span class="line">			&#125;</span><br><span class="line">			if (_role == &#x27;operation&#x27;) &#123;</span><br><span class="line">				this.tabbar = [</span><br><span class="line">					&#x27;tabOperationCustom&#x27;, &#x27;tabMyIndex&#x27;</span><br><span class="line">				]</span><br><span class="line">				this.activeTab = &#x27;tabOperationCustom&#x27;</span><br><span class="line">			&#125;</span><br><span class="line">			if (_role == &#x27;operationadmin&#x27;) &#123;</span><br><span class="line">				this.tabbar = [</span><br><span class="line">					&#x27;tabOperationadminCustom&#x27;, &#x27;tabOperationadminPerformance&#x27;, &#x27;tabOperationadminPersonnel&#x27;,</span><br><span class="line">					&#x27;tabMyIndex&#x27;</span><br><span class="line">				]</span><br><span class="line">				this.activeTab = &#x27;tabOperationadminCustom&#x27;</span><br><span class="line">			&#125;</span><br><span class="line">		&#125;,</span><br><span class="line">		components: &#123;</span><br><span class="line">			myTabbar,</span><br><span class="line">			adminIndex,</span><br><span class="line">			adminCustom,</span><br><span class="line">			adminDepartment,</span><br><span class="line">			adminPersonnel,</span><br><span class="line">			saleCustom,</span><br><span class="line">			saleadminCustom,</span><br><span class="line">			saleadminPerformance,</span><br><span class="line">			saleadminPersonnel,</span><br><span class="line">			evaluateCustom,</span><br><span class="line">			evaluateadminCustom,</span><br><span class="line">			evaluateadminPerformance,</span><br><span class="line">			evaluateadminPersonnel,</span><br><span class="line">			operationCustom,</span><br><span class="line">			operationadminCustom,</span><br><span class="line">			operationadminPerformance,</span><br><span class="line">			operationadminPersonnel,</span><br><span class="line">			my</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line"> </span><br><span class="line">&lt;style lang=&quot;scss&quot; scoped&gt;</span><br><span class="line">	.main &#123;</span><br><span class="line">		height: calc(100vh - 101upx);</span><br><span class="line">		overflow-y: scroll;</span><br><span class="line">	&#125;</span><br><span class="line">	.footer &#123;</span><br><span class="line">		height: 101upx;</span><br><span class="line">	&#125;</span><br><span class="line">&lt;/style&gt;</span><br></pre></td></tr></table></figure>

<p>page&#x2F;login&#x2F;index.vue</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">	&lt;view class=&quot;page&quot;&gt;</span><br><span class="line">		&lt;view class=&quot;content&quot;&gt;</span><br><span class="line">			&lt;view class=&quot;title&quot;&gt;用户登录&lt;/view&gt;</span><br><span class="line">			&lt;form class=&quot;login-form&quot;&gt;</span><br><span class="line">				&lt;view class=&quot;form-item form-item-inline&quot;&gt;</span><br><span class="line">					&lt;text class=&quot;w-icon-user&quot;&gt;&lt;/text&gt;</span><br><span class="line">					&lt;input v-model=&quot;loginData.account&quot; placeholder=&quot;请输入密码&quot; /&gt;</span><br><span class="line">					&lt;text v-if=&quot;loginData.account.length &gt; 0&quot; class=&quot;w-icon-circle-close&quot;</span><br><span class="line">						@click=&quot;loginData.account = &#x27;&#x27;&quot;&gt;&lt;/text&gt;</span><br><span class="line">				&lt;/view&gt;</span><br><span class="line">				&lt;view class=&quot;form-item form-item-inline&quot;&gt;</span><br><span class="line">					&lt;text class=&quot;w-icon-lock&quot;&gt;&lt;/text&gt;</span><br><span class="line">					&lt;input v-model=&quot;loginData.password&quot; placeholder=&quot;请输入密码&quot; :password=&quot;!showpwd&quot; /&gt;</span><br><span class="line">					&lt;text v-if=&quot;showpwd &amp;&amp; loginData.password.length &gt; 0&quot; class=&quot;w-icon-eye-o&quot; @click=&quot;showpwd = !showpwd&quot;&gt;&lt;/text&gt;</span><br><span class="line">					&lt;text v-if=&quot;!showpwd &amp;&amp; loginData.password.length &gt; 0&quot; class=&quot;w-icon-eye&quot; @click=&quot;showpwd = !showpwd&quot;&gt;&lt;/text&gt;</span><br><span class="line"> </span><br><span class="line">				&lt;/view&gt;</span><br><span class="line">				&lt;button class=&quot;submit-btn&quot; @click=&quot;doLogin&quot;&gt;登 录&lt;/button&gt;</span><br><span class="line">				</span><br><span class="line">				&lt;button class=&quot;&quot; @click=&quot;toHome(&#x27;admin&#x27;)&quot;&gt;管理员&lt;/button&gt;</span><br><span class="line">				&lt;button class=&quot;&quot; @click=&quot;toHome(&#x27;sale&#x27;)&quot;&gt;销售&lt;/button&gt;</span><br><span class="line">				&lt;button class=&quot;&quot; @click=&quot;toHome(&#x27;saleadmin&#x27;)&quot;&gt;销售管理&lt;/button&gt;</span><br><span class="line">				&lt;button class=&quot;&quot; @click=&quot;toHome(&#x27;evaluate&#x27;)&quot;&gt;测评&lt;/button&gt;</span><br><span class="line">				&lt;button class=&quot;&quot; @click=&quot;toHome(&#x27;evaluateadmin&#x27;)&quot;&gt;测评管理&lt;/button&gt;</span><br><span class="line">				&lt;button class=&quot;&quot; @click=&quot;toHome(&#x27;operation&#x27;)&quot;&gt;运营管理&lt;/button&gt;</span><br><span class="line">				&lt;button class=&quot;&quot; @click=&quot;toHome(&#x27;operationadmin&#x27;)&quot;&gt;运营管理&lt;/button&gt;</span><br><span class="line">			&lt;/form&gt;</span><br><span class="line">		&lt;/view&gt;</span><br><span class="line">	&lt;/view&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"> </span><br><span class="line">&lt;script&gt;</span><br><span class="line">import fun from &#x27;../../common/fun&#x27;</span><br><span class="line">	export default &#123;</span><br><span class="line">		data() &#123;</span><br><span class="line">			return &#123;</span><br><span class="line">				loginData: &#123;</span><br><span class="line">					account: &#x27;&#x27;,</span><br><span class="line">					password: &#x27;&#x27;,</span><br><span class="line">				&#125;,</span><br><span class="line">				showpwd: false,</span><br><span class="line">			&#125;</span><br><span class="line">		&#125;,</span><br><span class="line">		methods: &#123;</span><br><span class="line">			doLogin() &#123;</span><br><span class="line">				fun.toPage(&#x27;/pages/index/index&#x27;)</span><br><span class="line">			&#125;,</span><br><span class="line">			</span><br><span class="line">			toHome(type) &#123;</span><br><span class="line">				localStorage.setItem(&#x27;token&#x27;, type)</span><br><span class="line">				</span><br><span class="line">				uni.reLaunch(&#123;</span><br><span class="line">					url: &#x27;/pages/index/index&#x27;</span><br><span class="line">				&#125;)</span><br><span class="line">			&#125;,</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line"> </span><br><span class="line">&lt;style lang=&quot;scss&quot;&gt;</span><br><span class="line">	.content &#123;</span><br><span class="line">		position: absolute;</span><br><span class="line">		width: calc(100% - 60px);</span><br><span class="line">		top: 100px;</span><br><span class="line">		left: 50%;</span><br><span class="line">		transform: translateX(-50%);</span><br><span class="line"> </span><br><span class="line">		.title &#123;</span><br><span class="line">			width: 100%;</span><br><span class="line">			font-size: 20px;</span><br><span class="line">			text-align: center;</span><br><span class="line">			margin-bottom: 30px;</span><br><span class="line">		&#125;</span><br><span class="line"> </span><br><span class="line">		.login-form &#123;</span><br><span class="line">			width: 100%;</span><br><span class="line"> </span><br><span class="line">			.form-item-inline &#123;</span><br><span class="line">				display: inline-flex;</span><br><span class="line">			&#125;</span><br><span class="line"> </span><br><span class="line">			.form-item &#123;</span><br><span class="line">				border-bottom: solid 1px #ddd;</span><br><span class="line">				padding: 8px 3px;</span><br><span class="line">				height: 56px;</span><br><span class="line">				width: 100%;</span><br><span class="line">				box-sizing: border-box;</span><br><span class="line">				-moz-box-sizing: border-box;</span><br><span class="line">				-webkit-box-sizing: border-box;</span><br><span class="line"> </span><br><span class="line">				input &#123;</span><br><span class="line">					height: 40px;</span><br><span class="line">					width: 100%;</span><br><span class="line">					line-height: 40px;</span><br><span class="line">					font-size: 16px;</span><br><span class="line">					padding: 0 5px;</span><br><span class="line">				&#125;</span><br><span class="line"> </span><br><span class="line">				[class^=&quot;w-icon-&quot;],</span><br><span class="line">				[class*=&quot; w-icon-&quot;] &#123;</span><br><span class="line">					font-size: 18px;</span><br><span class="line">					margin-top: 10px;</span><br><span class="line">				&#125;</span><br><span class="line">			&#125;</span><br><span class="line"> </span><br><span class="line">			.submit-btn &#123;</span><br><span class="line">				margin-top: 50px;</span><br><span class="line">				background-color: deepskyblue;</span><br><span class="line">				color: #fff;</span><br><span class="line">			&#125;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">&lt;/style&gt;</span><br></pre></td></tr></table></figure>

<p>page.json</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">	&quot;easycom&quot;: &#123;</span><br><span class="line">		&quot;autoscan&quot;: true,</span><br><span class="line">		&quot;custom&quot;: &#123;</span><br><span class="line">			// uni-ui 规则如下配置</span><br><span class="line">			&quot;^uni-(.*)&quot;: &quot;@uni_modules/uni-$1/uni-$1.vue&quot;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;,</span><br><span class="line">	&quot;pages&quot;: [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages</span><br><span class="line">		&#123;</span><br><span class="line">			&quot;path&quot;: &quot;pages/login/index&quot;,</span><br><span class="line">			&quot;style&quot;: &#123;</span><br><span class="line">				&quot;navigationStyle&quot;: &quot;custom&quot;</span><br><span class="line">			&#125;</span><br><span class="line">		&#125;</span><br><span class="line"> </span><br><span class="line">		, &#123;</span><br><span class="line">			&quot;path&quot;: &quot;pages/index/index&quot;</span><br><span class="line">		&#125;</span><br><span class="line"> </span><br><span class="line">		, &#123;</span><br><span class="line">			&quot;path&quot;: &quot;pages/my/index&quot;</span><br><span class="line">		&#125;</span><br><span class="line"> </span><br><span class="line">		, &#123;</span><br><span class="line">			&quot;path&quot;: &quot;pages/admin/index&quot;</span><br><span class="line">		&#125;, &#123;</span><br><span class="line">			&quot;path&quot;: &quot;pages/admin/custom&quot;</span><br><span class="line">		&#125;, &#123;</span><br><span class="line">			&quot;path&quot;: &quot;pages/admin/department&quot;</span><br><span class="line">		&#125;, &#123;</span><br><span class="line">			&quot;path&quot;: &quot;pages/admin/personnel&quot;</span><br><span class="line">		&#125;</span><br><span class="line"> </span><br><span class="line">		, &#123;</span><br><span class="line">			&quot;path&quot;: &quot;pages/sale/custom&quot;</span><br><span class="line">		&#125;</span><br><span class="line"> </span><br><span class="line">		, &#123;</span><br><span class="line">			&quot;path&quot;: &quot;pages/saleadmin/custom&quot;</span><br><span class="line">		&#125;, &#123;</span><br><span class="line">			&quot;path&quot;: &quot;pages/saleadmin/performance&quot;</span><br><span class="line">		&#125;, &#123;</span><br><span class="line">			&quot;path&quot;: &quot;pages/saleadmin/personnel&quot;</span><br><span class="line">		&#125;</span><br><span class="line"> </span><br><span class="line">		, &#123;</span><br><span class="line">			&quot;path&quot;: &quot;pages/evaluate/custom&quot;</span><br><span class="line">		&#125;</span><br><span class="line"> </span><br><span class="line">		, &#123;</span><br><span class="line">			&quot;path&quot;: &quot;pages/evaluateadmin/custom&quot;</span><br><span class="line">		&#125;, &#123;</span><br><span class="line">			&quot;path&quot;: &quot;pages/evaluateadmin/performance&quot;</span><br><span class="line">		&#125;, &#123;</span><br><span class="line">			&quot;path&quot;: &quot;pages/evaluateadmin/personnel&quot;</span><br><span class="line">		&#125;</span><br><span class="line"> </span><br><span class="line">		, &#123;</span><br><span class="line">			&quot;path&quot;: &quot;pages/operation/custom&quot;</span><br><span class="line">		&#125;</span><br><span class="line"> </span><br><span class="line">		, &#123;</span><br><span class="line">			&quot;path&quot;: &quot;pages/operationadmin/custom&quot;</span><br><span class="line">		&#125;, &#123;</span><br><span class="line">			&quot;path&quot;: &quot;pages/operationadmin/performance&quot;</span><br><span class="line">		&#125;, &#123;</span><br><span class="line">			&quot;path&quot;: &quot;pages/operationadmin/personnel&quot;</span><br><span class="line">		&#125;</span><br><span class="line">	],</span><br><span class="line">	&quot;globalStyle&quot;: &#123;</span><br><span class="line">		&quot;navigationBarTextStyle&quot;: &quot;black&quot;,</span><br><span class="line">		&quot;navigationBarTitleText&quot;: &quot;uni-app&quot;,</span><br><span class="line">		&quot;navigationBarBackgroundColor&quot;: &quot;#F8F8F8&quot;,</span><br><span class="line">		&quot;backgroundColor&quot;: &quot;#F8F8F8&quot;</span><br><span class="line">	&#125;,</span><br><span class="line">	&quot;uniIdRouter&quot;: &#123;&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>最后效果<br><img src="/2024/01/16/0007/001.png"></p>
<blockquote>
<p><a target="_blank" rel="noopener" href="https://download.csdn.net/download/zsh0409/88557936?spm=1001.2101.3001.9499">源码下载 https://download.csdn.net/download/zsh0409/88557936?spm=1001.2101.3001.9499</a></p>
</blockquote>

      </div>
    </div>
</div>

<div class="post-category">

    <div id="p-meta-i">
        
              
                <a class="hover-with-bg" href="/categories/uniapp/">uniapp</a>
              
          
          
              
                <a class="hover-with-bg" href="/tags/uniapp/"># uniapp</a>
              
                <a class="hover-with-bg" href="/tags/%E8%87%AA%E5%AE%9A%E4%B9%89tabbar/"># 自定义tabbar</a>
              
                <a class="hover-with-bg" href="/tags/%E5%BA%95%E9%83%A8tabbar/"># 底部tabbar</a>
              
                <a class="hover-with-bg" href="/tags/%E6%97%A0%E9%97%AA%E7%83%81/"># 无闪烁</a>
              
          
    </div>
</div>


<div class="post-footer">
  
  <div class="donate text-center">
    <span>喜欢这篇文章？为什么不考虑打赏一下作者呢？</span>
    <div class="donate-way">
      
        <a href="/about/" class="donate-btn button">
          赞赏
        </a>
      
    </div>
  </div>
  

  <div class="post-copyright">
    <p style="margin: 5px 0;">文章作者：<a href="/">zsh0409</a></p>
    <p style="margin: 5px 0;">文章链接：<a href="http://zsh0409.gitee.io/2024/01/16/0007/">http://zsh0409.gitee.io/2024/01/16/0007/</a></p>
    <p style="margin: 5px 0;">版权声明：本博客所有文章除特别声明外，均采用 <a target="_blank" href="https://creativecommons.org/licenses/by-sa/4.0/deed.zh" rel="nofollow noopener noopener">CC BY-SA 4.0 协议</a> ，转载请注明出处，谢谢。</p>
  </div>
  
</div>

</article>


        </div>
        
<footer class="text-center">
    
    
    
    
    
    <p>&copy;  2024 - 2024&nbsp;&nbsp;zsh0409</p>
    
    <p>Powered by <a href="https://hexo.io" target="_blank">Hexo</a> | Theme by <a href="https://github.com/oCoke/hexo-theme-miracle" target="_blank">Miracle</a></p>
    
    
</footer>

<div class="p-btn">
    
        <a class="toc-btn" id="toc-btn"><i id="i-menu"></i></a>
    
    
      <a class="toc-btn" id="share-btn"><i>
        <svg t="1670124379155" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2683" width="25" height="25"><path d="M395.946667 234.666667v64H256v469.333333h512V522.666667h64V768a64 64 0 0 1-64 64H256a64 64 0 0 1-64-64V298.666667a64 64 0 0 1 64-64h139.946667z m335.850666-87.914667l150.848 150.826667-158.378666 158.4-45.269334-45.248L748.394667 341.333333H672c-121.685333 0-220.714667 97.024-223.914667 217.941334L448 565.333333v85.333334h-64v-85.333334C384 406.272 512.938667 277.333333 672 277.333333h99.861333l-85.312-85.333333 45.248-45.248z" p-id="2684" fill="var(--first-text-color)"></path></svg>
      </i></a>
    
    <a href="javascript:window.scrollTo({top:0,behavior:'smooth'});" class="click-btn">
      <i id="i-up"></i>
    </a>
</div>

<!-- SCRIPTS -->






<script>
    document.getElementById("btn-dropdown").addEventListener('click', () => {
      toggleClass("#dropdown-menus","display-inline");
    });
    console.log('\n' + ' %c Powered by Hexo Theme Miracle ' + ' %c https://github.com/oCoke/hexo-theme-miracle ' + '\n' + '\n', 'color: #fff; background: #4F9BFA; padding:5px 0;', 'background: #FFF; padding:5px 0;');

    

    
  /* 小彩蛋: 饮茶先啦 */
  setTimeout(() => {
    var time = new Date();
    if (time.getHours() == 15) {
      let comment = document.createComment(' 三点几嚟！饮茶先啦！ ');
      document.body.insertBefore(comment, document.getElementsByTagName('header')[0]);
    }
  },1);
    
</script>


<script>
    var postImg = document.querySelectorAll("article[class=page] img");
    for (let imgi = 0; imgi < postImg.length; imgi++) {
        postImg[imgi].onclick = () => {
            let zoomImg = document.createElement("div");
            zoomImg.id = "zoomImg";
            zoomImg.innerHTML = `<div id="zoom-picture"></div>
    <div class="poptrox-overlay"
        style="position: fixed; left: 0px; top: 0px; z-index: 20000; width: 100%; height: 100%; text-align: center; cursor: zoom-out; opacity: 1;">
        <div style="display:inline-block;height:100%;vertical-align:middle;"></div>
        <div
            style="position:absolute;left:0;top:0;width:100%;height:100%;background:#000000;opacity:0;filter:alpha(opacity=0);">
        </div>
        <div class="poptrox-popup"
            style="display: inline-block; vertical-align: middle; position: relative; z-index: 1; cursor: zoom-out; min-width: 10px; min-height: 10px; width: auto; height: auto;">
            <div class="loader" style="display: none;"></div>
            <div class="pic" style="text-indent: 0px;"><img
                    src="${ postImg[imgi].srcset || postImg[imgi].src }" alt="Loading..."
                    style="vertical-align: bottom; max-width: 85vw; max-height: 85vh;"></div>
        </div>
    </div>`;
            document.body.appendChild(zoomImg);
                document.querySelector("#zoomImg").onclick = () => {
                    document.querySelector("#zoomImg").remove();
                }
        }
    }
    
</script>




    <script>
        query("#toc-btn")[0].onclick = () => {
            if (query(".post-toc")[0].innerHTML) {
                toggleClass(".post-toc", "display-inline");
            }
        }

        if (!query(".post-toc")[0].innerHTML) {
            addClass("#toc-btn","display-none");
        }
    </script>



    <script>
        query("#share-btn")[0].onclick = async () => {
            let url = `${location.protocol}//${location.hostname}${location.port ? ":"+location.port:location.port}${location.pathname}#read=${sessionStorage.getItem(location.pathname+"_read_y") || ""}`;
            try {
                await navigator.clipboard.writeText(url);
                prompt_core("分享链接已经复制至剪贴板", 4800, true);
            } catch(e) {
                prompt_core("分享链接复制失败，请手动复制<br/>"+url, 4800, false);
            }
        }
    </script>







    <script>
        const getScrollPosition = (el = window) => ({
            x: el.pageXOffset !== undefined ? el.pageXOffset : el.scrollLeft,
            y: el.pageYOffset !== undefined ? el.pageYOffset : el.scrollTop
        });
        // 此处的 750 是「页面元素的最大宽度」
        var wx = document.getElementsByClassName("article-m")[0].clientWidth;
        var wy = document.getElementsByClassName("article-m")[0].clientHeight;
        function windowScroll() {
            // 反复修改 确保页面尺寸不改变
            wx = document.getElementsByClassName("article-m")[0].clientWidth;
            wy = document.getElementsByClassName("article-m")[0].clientHeight;
            let y = Math.round(getScrollPosition().y);
            // console.log(y);
            // 组合字符串，同时记录页面坐标，页面宽度和高度
            let p = `${y}:${wx}:${wy}`;
            // 写入到 sessionStorage 中
            sessionStorage.setItem(location.pathname + "_read_y", p);
        }
        // URL 中是否包含传递的坐标信息
        setTimeout(() => {
            if (location.hash.split("#read=").length > 1) {
                prompt_core("已有阅读进度，正在跳转", 4800, true);
                // 分离字符串
                let read_y = location.hash.split("#read=")[1];
                read_y = read_y.split(":");
                // 组合乘积，顺滑移动至坐标
                window.scrollTo({top: Math.round(Number(read_y[0]) * Number(read_y[1] * Number(read_y[2] / wx / wy))), behavior: "smooth"});
            } else {
                // 从 sessionStorage 中获取
                let read_y = sessionStorage.getItem(location.pathname + "_read_y") || "0:0:0";
                read_y = read_y.split(":");
                if (read_y[0] != "0") prompt_core("已有阅读进度，正在跳转", 4800, true);
                window.scrollTo({top: Math.round(Number(read_y[0]) * Number(read_y[1] * Number(read_y[2] / wx / wy))), behavior: "smooth"});
            }
        }, 500);
        window.onscroll = windowScroll;
    </script>





        </div>
        <div id="css-loading">
            <h3 class="text-center">加载中...</h3>
        </div>
        
    </body>
</html>
